<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>网站后台管理系统</title>
  <link rel="shortcut icon" href="favicon.ico"/>
  <link rel="bookmark" href="favicon.ico"/>
  <link rel="stylesheet" href="plugins/layui/css/layui.css">
  <link rel="stylesheet" href="styles/css/main.css">
  <link rel="stylesheet" href="styles/css/default.theme.css?__inline">
</head>
<body>
<div class="layui-progress dx-progress-page layui-hide" id="dx-progress-page" lay-filter="request-progress">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="0"></div>
</div>

<!--header 导航栏-->
<header class="layui-layout layui-layout-admin">
  <div class="layui-header dx-header header header-demo">
    <div class="layui-main">
      <a class="logo" href="/">
        <img src="images/logo.png" alt="layui">
      </a>
      <h2 class="title">网站后台管理系统</h2>
      <ul class="dx-nav">
        <li class="name"><a href="https://github.com/Xuffy/layui-wms" target="_blank">欢迎您，xuffy</a></li>
        <li id="updatePassword-btn">
          <span class="icon"><i class="iconfont icon-moban162"></i></span><span>修改密码</span>
        </li>
        <li onclick="window.location.href='login.html'">
          <span class="icon"><i class="iconfont icon-tuichu"></i></span><span>退出登录</span>
        </li>
      </ul>
    </div>
  </div>
</header>

<!--menu 左侧菜单-->
<nav class="dx-menu">
  <ul class="layui-nav layui-nav-tree" lay-filter="menu">
    <li class="layui-nav-item layui-nav-itemed">
      <a href="javascript:;">
        <i class="iconfont icon-suo"></i><span class="menu-title">后台用户管理</span>
      </a>
      <dl class="layui-nav-child">
        <dd dx-menu="backstage.user"><a href="javascript:;">后台用户</a></dd>
        <dd dx-menu="backstage.role"><a href="javascript:;">后台角色</a></dd>
        <dd dx-menu="rights.management"><a href="javascript:;">权限维护</a></dd>
      </dl>
    </li>
    <li class="layui-nav-item">
      <a href="javascript:;">
        <i class="iconfont icon-yonghu"></i><span class="menu-title">APP用户管理</span>
      </a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;">APP用户</a></dd>
        <dd><a href="javascript:;">黑名单</a></dd>
      </dl>
    </li>
    <li class="layui-nav-item">
      <a href="javascript:;">
        <i class="iconfont icon-icon86"></i><span class="menu-title">业务设置</span>
      </a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;">实验人员角色</a></dd>
        <dd><a href="javascript:;">实验人员权限</a></dd>
      </dl>
    </li>
    <li class="layui-nav-item">
      <a href="javascript:;">
        <i class="iconfont icon-xiaoxi"></i><span class="menu-title">消息设置</span>
      </a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;">消息模板</a></dd>
        <dd><a href="javascript:;">短信模板</a></dd>
      </dl>
    </li>
    <li class="layui-nav-item">
      <a href="javascript:;">
        <i class="iconfont icon-yuancailiaopandian"></i><span class="menu-title">耗材管理</span>
      </a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;">耗材库</a></dd>
      </dl>
    </li>
    <li class="layui-nav-item">
      <a href="javascript:;">
        <i class="iconfont icon-file"></i><span class="menu-title">资源管理</span>
      </a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;">硬件</a></dd>
        <dd><a href="javascript:;">资料</a></dd>
      </dl>
    </li>
    <li class="layui-nav-item">
      <a href="javascript:;">
        <i class="iconfont icon-msnui-operate"></i><span class="menu-title">运营设置</span>
      </a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;">文档</a></dd>
        <dd><a href="javascript:;">参数设置</a></dd>
        <dd><a href="javascript:;">字典表</a></dd>
      </dl>
    </li>
    <li class="layui-nav-item">
      <a href="javascript:;">
        <i class="iconfont icon-yifu"></i><span class="menu-title">界面设置</span>
      </a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;">banner设计</a></dd>
      </dl>
    </li>
  </ul>
</nav>

<!--内容区域-->
<div class="dx-module">
  <div class="dx-breadcrumb">
    <span class="layui-breadcrumb">
      <!--<a href="javascript:void(0);">权限管理</a>
      <a><cite>后台管理员</cite></a>-->
    </span>
  </div>
  <div class="dx-content" id="dx-content">
    <section style="position: absolute;top: 0;left: 0;width: 100%;height: 100%; background-color: #f5f5f5;z-index: 10">
      <div class="dx-welcome"></div>
      <h5 class="dx-welcome-title">欢迎进入后台管理系统，请点击左侧菜单开始操作吧！<a href="https://github.com/Xuffy/layui-wms" target="_blank"
                                                              style="color: #d8d8d8">@github</a></h5>
    </section>
  </div>
</div>

<!--修改密码弹窗-->
<div id="updatePassword" class="index-updatePassword dx-info-default">
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">账号</label>
      <div class="layui-input-block dx-input-required">
        <input type="text" name="username" lay-verify="required" autocomplete="off" placeholder="请输入账号"
               class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">旧密码</label>
      <div class="layui-input-block dx-input-required">
        <input type="password" name="oldPassword" lay-verify="required" autocomplete="off" placeholder="请输入旧密码"
               class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">新密码</label>
      <div class="layui-input-block dx-input-required">
        <input type="password" name="password" lay-verify="required" autocomplete="off" placeholder="请输入新密码"
               class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">确认密码</label>
      <div class="layui-input-block dx-input-required">
        <input type="password" name="confirmPassword" lay-verify="required" autocomplete="off" placeholder="请确认密码"
               class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit="" lay-filter="updatePassword">提交</button>
      </div>
    </div>
  </form>
</div>

<!--跳转页面遮罩层-->
<!--<div class="index-shade-ban layui-hide"></div>-->

<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="plugins/underscore-min.js"></script>
<script type="text/javascript" src="javascript/main.js?__inline"></script>
<script type="text/javascript" src="app.js?__inline"></script>
<script type="text/javascript">
  layui.use(['layer', 'element', '_route', 'form'], function () {
    var layer = layui.layer
      , element = layui.element()
      , form = layui.form()
      , _route = layui._route;

    window.$ = layui.jquery;

    // 监听修改密码点击
    $('#updatePassword-btn').on('click', function () {
      layer.open({
        type: 1,
        shadeClose: true,
        title: '修改密码',
        offset: '20%',
        content: $('#updatePassword')
      });
    });

    // 监听导航点击
    element.on('nav(menu)', function (elem) {
      var mUrl = elem.attr('dx-menu');
      !_.isEmpty(mUrl) && _route.go(mUrl);
    });

    // 监听修改密码提交
    form.on('submit(updatePassword)', function (data) {
      layer.alert(JSON.stringify(data.field), {
        title: '最终的提交信息'
      });
      return false;
    });

    // 初始化欢迎页面
    _route.setBreadcrumb(null, {hide: true});

  });
</script>
</body>
</html>